<template>
	<view class="theme-page-bg padding-20 h100vh">
		<NavBar :titleObj="titleObj"></NavBar>
		<ScrollView
			:contentHeight="contentHeight"
		 >
			<template #content>
				<ShopIntro class="m-t-30" :shopIntro="shopIntro" />
				<view class="m-t-30 bg-w border-r30 bg-item">
					<view class="flex font32 color-8E8E8E flex-align-center flex-space-between">
						店铺星级
						<Star :starNum="detail.store_level || 0" />
					</view>
					<!-- <view class="flex font32 color-8E8E8E flex-align-center flex-space-between m-t-30">
						用户评价
						<view class="color-3FA897 f-b flex flex-align-center flex-space-between">
							{{ detail.user_eval }}分
							<text style="margin-left: 60rpx;">中</text> 
						</view>
					</view> -->
				</view>
				<view class="m-t-30 bg-w border-r30">
					<NavItem :dataItem="{ label: '店铺简介',border: true}">
						<template #right>
							<view class="font32 f-b color-8E8E8E">{{ detail.store_intro }}</view>
						</template>
					</NavItem>
					<NavItem :dataItem="{ label: '所在地区',border: true}">
						<template #right>
							<view class="font32 f-b color-8E8E8E">{{ detail.location }}</view>
						</template>
					</NavItem>
					<NavItem :dataItem="{ label: '开店时间', left: '可添加5人'}">
						<template #right>
							<view class="font32 f-b color-8E8E8E">{{ formatDate(new Date(detail.opening_time)) || detail.opening_time }}</view>
						</template>
					</NavItem>
				</view>
				<view class="m-t-30 bg-w border-r30">
					<NavItem :dataItem="{ label: '联系客服', type: 'contact', customArrow: true, path: 'service', border: true}">
						<template #right>
							<image style="width: 16rpx;height: 28rpx;" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/arrow_r.png" mode=""></image>
						</template>
					</NavItem>
					<NavItem :dataItem="{ label: '证照信息',customArrow: true, left: '可添加5人'}" @click="onTest">
						<template #right>
							<image style="width: 16rpx;height: 28rpx;" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/arrow_r.png" mode=""></image>
						</template>
					</NavItem>
				</view>
			</template>
		</ScrollView>
		<view class="button-style flex flex-center" @click="btnClick">
			去看看全部商品 >
		</view>
		
		<!-- 图片弹框 -->
		<uni-popup ref="popup" type="center">
			<image :src="detail.id_card_number || '#'"></image>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import NavBar from '@/components/accompany/navBar/index.vue';
	import ScrollView from '@/components/accompany/scrollView/scrollView.vue';
	import ShopIntro from '@/components/shopIntro/index.vue';
	import Star from '../components/star/index.vue';
	import NavItem from '@/components/accompany/tabbar/my/navItem/index.vue';
	import { formatDate } from '@/util/date';
	import { ref, getCurrentInstance, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	
	const { proxy } = getCurrentInstance() as any;
	
	const tabList = ref([
		{ name: '打针采血' },
		{ name: '上门换药' },
		{ name: '上门拆线' },
		{ name: '上门拆线' },
		{ name: '上门拆线' }
	])
	
	const titleObj = {
		title: '商家名称',
		isBack: true
	}
	
	const detail = ref<{[propertyName: string]: any}>({});
	
	const popup = ref();
	
	const shopIntro = computed(() => {
		return {
			pic: detail.value.logo, // 'https://img0.baidu.com/it/u=2022043590,1237511079&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
			name: detail.value.name, // '商家名称',
			followNum: detail.value.merchant_follow_num,
			isFollow: detail.value.isFollow
		}
	})
	
	const contentHeight:Ref<number> = ref(0)
	onLoad((option: {id: number | string}) => {
		let sysInfo = uni.getStorageSync('sysInfo')
		contentHeight.value = sysInfo.screenHeight - sysInfo.statusBarHeight - 44 - 116/sysInfo.devicePixelRatio
		getMerchant(option.id);
	})
	
	const getMerchant = (id) => {
		let url = proxy.$API.getMerchantById;
		proxy.$UNIHTTP.getData(url, {id}).then((res: any) => {
			if(res.code == 1){
				detail.value = res.data.merchant;
				console.log(11111189); // 打印detail的值
				console.log(detail.value); // 打印detail的值
			}
		})
	}
	
	const onTest = () => popup.value.open('center');
	
	function btnClick(){
		uni.navigateTo({
			url:'/pages/accompany-tmp/index/shopService/shopService'
		})
	}
</script>

<style lang="scss" scoped>
	.bg-item {
		padding: 30rpx;
	}
	.button-style {
		position: fixed;
		left: 20rpx;
		right: 20rpx;
		bottom: 20rpx;
	}
</style>
